<template>
    <el-form style="margin-right:0 !important" ref="formRef" :rules="rules" :model="form">
        <el-form-item label="关联活动" prop="drillId">
            <SingleLayerSelect :options="props.modelValue.pageConfig.drillList" v-model="form['drillId']"/>
        </el-form-item>
    </el-form>
    <el-row justify="end" style="margin-top: 50px;">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button plain @click="$emit('callBack','')">关闭</el-button>
    </el-row>
</template>

<script setup lang="ts">

const props = defineProps<{
    modelValue: {
        pageConfig: {
            drillList:  {label:any, value: any}[]
        }
    }
}>()

const form = ref({})
const formRef = useTemplateRef("formRef")
const rules = {
    drillId: [{ 
        required: true,
        trigger: "change",
        message: "请选择需要导出题库的活动"
    }]
}
const emits = defineEmits(["callBack"])

function handleConfirm (){
    formRef.value?.validate((validate)=>{
        if(validate){
            emits("callBack", form.value.drillId)
        }
    })
}

</script>

<style scoped>

</style>